import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createAddpersonAction } from '../../redux/actions/person_action'

class Person extends Component {

    render() {
        const { persons, sum } = this.props;
        console.log('persons', persons);
        return (
            <div>
                <h1>上边计算的值是：{sum}</h1>
                <h2>人员名单</h2>
                <div>
                    <input type="text" ref={c => this.nameEle = c} />
                    <input type="text" ref={c => this.ageEle = c} />
                    <button onClick={this.addPerson}>添加一个人</button>
                </div>
                <ul>
                    {
                        persons.map(item => {
                            return  <li key={item.id}>{item.name},{item.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
    
    addPerson = () => {
        const userName = this.nameEle.value;
        const userAge = this.ageEle.value;
        this.props.jiaren({ id: Date.now(), name: userName, age: userAge })
    }
}


//容器组件
//创建容器组件 并连接UI组件
const countContainer = connect(
    state => ({ persons: state.persons, sum: state.count }),
    {
        jiaren: createAddpersonAction
    }
)(Person);

export default countContainer;
